<template>
  <section class="main">
    <div class="title">
      <span>电子账户信息</span>
      <div></div>
    </div>
    <div class="container">
      <div class="WithdrawalTopStyle">
        <div>
          <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-1">
                  <i class="el-icon-coin grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">
                      {{ merchantinfo.trsTotalBalance }}
                    </div>
                    <div>账户余额</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-2">
                  <i class="el-icon-data-analysis grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">
                      {{ merchantinfo.trsAvailableBalance }}
                    </div>
                    <div>在途金额</div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-col :span="8">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <div class="grid-content grid-con-3">
                  <i class="el-icon-goods grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num">
                      {{ WithdrawalbalanceShow() }}
                    </div>
                    <div v-if="merchantinfo.mchNo == 'Y52310240005'">
                      挂账子账户余额
                    </div>
                    <div v-else>可提现余额</div>
                  </div>
                  <div class="widthdrawslButtonStyle" v-if="merchantinfo.mchNo != 'Y52310240005'">
                    <el-button class="WithdrawalStyle1" type="primary" size="mini" plain @click="withdrawalButton">提现</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="BasicInformation">
        <div class="itemBox">
          <div class="line">
            <div>绑定银行账户的开户行名称</div>
            <div>{{ merchantinfo.acctOpenBranchName }}</div>
          </div>
          <div class="line">
            <div>绑定提现账户户名</div>
            <div>{{ merchantinfo.bankAcctName }}</div>
          </div>
          <div class="line">
            <div>绑定银行账户</div>
            <div>{{ merchantinfo.bankAcctNo }}</div>
          </div>
          <div class="line">
            <div>绑定银行账户类型</div>
            <div>{{ merchantinfo.bankType === 1 ? "本地" : "他行" }}</div>
          </div>
          <div class="line">
            <div>通道会员账号</div>
            <div>{{ merchantinfo.channelAcctNo }}</div>
          </div>
          <div class="line">
            <div>通道名称</div>
            <div>{{ merchantinfo.channelName }}</div>
          </div>
          <div class="line">
            <div>开户行联行号</div>
            <div>{{ merchantinfo.cnapsBranchId }}</div>
          </div>
          <div class="line">
            <div>创建时间</div>
            <div>{{ merchantinfo.createTime }}</div>
          </div>
          <div class="line">
            <div>开户行超级网银行号</div>
            <div>{{ merchantinfo.eiconBankBranchId }}</div>
          </div>
          <div class="line">
            <div>邮箱</div>
            <div>{{ merchantinfo.email }}</div>
          </div>
          <div class="line">
            <div>身份证号码</div>
            <div>{{ merchantinfo.globalId }}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>会员证件类型</div>
            <div>{{ documenttype }}</div>
          </div>
          <div class="line">
            <div>乐收赢商户号</div>
            <div>
              {{ merchantinfo.mchNo }}
            </div>
          </div>
          <div class="line">
            <div>会员名称</div>
            <div>{{ merchantinfo.memberName }}</div>
          </div>
          <div class="line">
            <div>会员昵称</div>
            <div>{{ merchantinfo.memberNickName }}</div>
          </div>
          <div class="line">
            <div>会员编号</div>
            <div>{{ merchantinfo.memberNo }}</div>
          </div>
          <div class="line">
            <div>会员类型</div>
            <div>
              {{ merchantinfo.memberType === 1 ? "普通账户" : "商户账户" }}
            </div>
          </div>
          <div class="line">
            <div>手机号</div>
            <div>{{ merchantinfo.mobile }}</div>
          </div>

          <div class="line">
            <div>更新时间</div>
            <div>{{ merchantinfo.updateTime }}</div>
          </div>
          <div class="line">
            <div>提现手续费</div>
            <div>{{ merchantinfo.trsWithRate }}</div>
          </div>
          <div class="line">
            <div>提现单笔手续费</div>
            <div>{{ merchantinfo.trsWithPer }}</div>
          </div>
          <div class="line">
            <div style="white-space: nowrap; width:30%">状态</div>
            <div style="padding-left: 25%; white-space: nowrap;">{{ status }}</div>
            <div style="padding-right: 450px">
              <el-button
                type="primary"
                plain
                v-show="merchantinfo.status == 1"
                @click="UnbindBankAcct"
                >解绑</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <el-dialog
  title="提示"
  :visible.sync="ConfirmUnbindingVisible"
  width="30%"
  :before-close="handleClose">
  <span class="confirmUnbind">确认解绑提现账户</span><br /><span class="confirmUnbind">账户户名为:{{this.merchantinfo.bankAcctName}}</span><br /><span class="confirmUnbind">卡号为:{{this.merchantinfo.bankAcctNo}}</span><br /><span class="confirmUnbind">的绑定信息吗?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="ConfirmUnbindingVisible = false">取 消</el-button>
    <el-button type="primary" @click="ConfirmUnbinding">确 定</el-button>
  </span>
</el-dialog>
    <!-- 提现 -->
    <el-dialog
      v-dialogDrag
      title="提现"
      :visible.sync="WithdrawalFormVisible"
      width="50%"
      :close-on-click-modal="false"
    >
      <div class="widthFrom">
        <div class="WithdrawalStyle">
          <span class="WithdrawalWordStyle">电子账户名称:</span
          ><span class="widthdralValueStyle">{{
            merchantinfo.memberName
          }}</span>
        </div>
        <div class="WithdrawalStyle">
          <span class="WithdrawalWordStyle">账号:</span
          ><span class="widthdralValueStyle">{{ merchantinfo.memberNo }}</span>
        </div>
        <div class="WithdrawalStyle">
          <span class="WithdrawalWordStyle">可提现余额（元）:</span
          ><span class="widthdralValueStyle">{{
            merchantinfo.trsWithdrawalBalance
          }}</span>
        </div>
        <div class="WithdrawalDialogStyle">
          <span class="WithdrawalWordStyle WithdrawalDialogStyle2"
            >提现金额（元）:</span
          ><el-input
            placeholder="请输入提现金额"
            v-model="WithdrawalBalance"
            clearable
            type="number"
          >
          </el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <span class="Timeofreceipt">实时到账</span>
        <el-button @click="WithdrawalFormVisible = false">取消</el-button>
        <el-button type="primary" @click="ConfirmWithdrawal">确定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
const StarChannelTypes = [
  "aliChannelType",
  "bankChannelType",
  "bestpayChannelType",
  "ecnyChannelType",
  "longpayChannelType",
  "uniChannelType",
  "wxChannelType",
];
import {
  APIElectronicAccountDetails,
  APIWithdrawal,
  APIunbindBankAcct,
} from "@/api/api";

export default {
  // name: "baseform",
  data() {
    return {
      ConfirmUnbindingVisible:false,
      Timeofreceipt: "",
      trsWithdrawalBalance: "",
      WithdrawalFormVisible: false, //提现弹窗显示
      WithdrawalBalance: "",
      merchantno: "",
      merchantinfo: "",
      status: "",
      documenttype: "",
    };
  },
  watch: {
    codeChannelVisible: function () {
      console.log(arguments);
    },
  },
  created() {
    // this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.merchantno =JSON.parse( sessionStorage.getItem("merchants_id"));
    console.log('this.merchantno',this.merchantno);
    this.ElectronicAccountDetails();
  },
  mounted() {},

  methods: {
    ConfirmUnbinding(){
      APIunbindBankAcct(this.merchantno).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "解绑成功",
            type: "success",
          });
          this.ConfirmUnbindingVisible = false
          this.ElectronicAccountDetails();
        }else {
          this.ConfirmUnbindingVisible = false
          this.$message.error(res.message);
        }
      });
    },
    UnbindBankAcct() {
      this.ConfirmUnbindingVisible = true 
    },
    WithdrawalbalanceShow() {
      if (this.merchantinfo.mchNo == "Y52310240005")
        return this.merchantinfo.pendBalance;
      return this.merchantinfo.trsWithdrawalBalance;
    },
    //确认提现
    ConfirmWithdrawal() {
      // console.log("可提现金额this.trsWithdrawalBalance==  ",Number(this.trsWithdrawalBalance),'提现金额===',Number(this.WithdrawalBalance));
      // if (Number(this.WithdrawalBalance) > Number(this.trsWithdrawalBalance)) {
      //   console.log('true');
      //   this.$message({
      //     message: "提现金额不可以大于可提现金额",
      //     type: "warning",
      //   });
      // } else {
        this.withdrawalMethod();
      // }
    },
    //提现方法
    withdrawalMethod() {
      APIWithdrawal({
        memberId: this.merchantno,
        withdrawAmount: this.WithdrawalBalance,
      }).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.$message({
            message: "提现成功",
            type: "success",
          });
          this.WithdrawalFormVisible = false;
        } else {
          this.$message({
            message: res.message,
            type: "warning",
          });
        }
      });
    },
    getnowtime() {
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
      var day = today.getDate() + 1;

      // 格式化输出
      this.Timeofreceipt =
        year +
        "-" +
        (month < 10 ? "0" : "") +
        month +
        "-" +
        (day < 10 ? "0" : "") +
        day;
    },
    //提现按钮
    withdrawalButton() {
      this.getnowtime();
      this.WithdrawalFormVisible = true;
    },
    //状态处理
    Dealstatus(sta) {
      switch (sta) {
        case 0:
          this.status = "未绑定";
          break;
        case 1:
          this.status = "已绑定";
          break;
        case 2:
          this.status = "待鉴权";
          break;
        default:
      }
    },
    //证件类型处理
    Dealdocument(sta) {
      switch (sta) {
        case 1:
          this.documenttype = "身份证";
          break;
        case 2:
          this.documenttype = "军人军官证";
          break;
        case 3:
          this.documenttype = "港澳台居民通行证";
          break;
        case 4:
          this.documenttype = "中国护照";
          break;
        case 5:
          this.documenttype = "单位统一代码";
          break;
        case 51:
          this.documenttype = "法人代码证";
          break;
        case 52:
          this.documenttype = "组织机构代码证";
          break;
        case 53:
          this.documenttype = "政府机构/公共机构批文";
          break;
        case 60:
          this.documenttype = "香港商业登记证";
          break;
        case 65:
          this.documenttype = "事业单位登记证";
          break;
        case 68:
          this.documenttype = "营业执照";
          break;
        case 73:
          this.documenttype = "统一社会信用代码";
          break;
        default:
      }
    },
    ElectronicAccountDetails() {
      APIElectronicAccountDetails(this.merchantno).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else if (res.code == 200) {
          this.merchantinfo = res.data;
          this.trsWithdrawalBalance = this.merchantinfo.trsWithdrawalBalance;
          this.Dealstatus(this.merchantinfo.status);
          this.Dealdocument(this.merchantinfo.globalType);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.confirmUnbind{
  display: inline-block;
  padding:5px 45px;
  font-size: 18px;
}
.stateLine {
  display: flex;
}
.Timeofreceipt {
  padding-right: 40px;
  color: red;
}
.widthdrawslButtonStyle {
  padding-right: 150px;
}
.container {
  display: flex;
  flex-direction: column;
}
.WithdrawalTopStyle {
  width: 90%;
}
.mgb20 {
  margin-bottom: 20px;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}
.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.WithdrawalStyle {
  padding-top: 10px;
  font-weight: 500;
  display: flex;
  white-space: nowrap;
}
.widthdralValueStyle {
  line-height: 32px;
}
.WithdrawalWordStyle {
  line-height: 32px;
  width: 113px;
  text-align: right;
  margin-right: 10px;
}

.ketixianjine {
  // height: 16px;
  padding-left: 173px;
}
.tixianbuttom {
  padding-right: 370px;
}
.WithdrawalDialogStyle {
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-top: 12px;
}
.WithdrawalDialogStyle2 {
  width: 130px;
  height: 32px;
  line-height: 32px;
}
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}

.PaymentChannel {
  padding-bottom: 0px;
}
.BasicInformation {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .itemBox {
    width: 50%;
    .line {
      width: 100%;
      display: flex;
      font-size: 12px;
      line-height: 200%;
      div:nth-child(1) {
        width: 30%;
        text-align: left;
      }
      div:nth-child(2) {
        width: 70%;
        text-align: left;
        color: #888888;
      }
    }
  }
  .payBox {
    width: 100%;
    .thead {
      border-bottom: 1px solid #dddddd;
      display: flex;
      padding-top: 15px;
      span {
        width: 25%;
        text-align: center;
        display: inline-block;
      }
    }
  }
  .tbody {
    display: flex;
    padding: 15px 0;
    div {
      width: 25%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
  }
}

.channel .cBox .channelitem .line {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  margin-top: 20px;
}

.channel .cBox .channelitem .line img {
  width: 45px;
  height: 45px;
  margin-right: 10px;
  margin-bottom: 50px;
}
</style>